<template>
  <div class="addNew">
    <el-form :model="formInline" label-position="top" size="large">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="公告标题">
            <el-input v-model="formInline.title" placeholder="公告标题" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="内容1">
            <el-input v-model="formInline.p_1" placeholder="内容1" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="图片链接1">
            <el-input v-model="formInline.url_1" placeholder="图片链接1" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="内容2">
            <el-input v-model="formInline.p_2" placeholder="内容2" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="图片链接2">
            <el-input v-model="formInline.url_2" placeholder="图片链接2" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{
              filterNew ? '修改' : '添加'
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { addBlog, updateBlog } from '@/utils/zyy-axios'
const { filterNew } = defineProps(['filterNew'])
const emit = defineEmits(['handleDraewr'])

let timenow = new Date().toLocaleString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false, // 使用 24 小时制
})
let auname = localStorage.getItem('users')
console.log('auname', auname)
// 表单数据
const formInline = ref(
  filterNew || {
    title: '',
    publishedAt: timenow,
    uptime: timenow,
    auname: auname,
    p_1: '',
    p_2: ' ',
    url_1: '',
    url_2: '',
  }
)

// 提交数据，添加博客信息
const onSubmit = async () => {
  const { title, publishedAt, uptime, auname, p_1, p_2, url_1, url_2 } = formInline.value
  // console.log('formInline.value', formInline.value)
  if (!filterNew) {
    await addBlog(title, publishedAt, uptime, auname, p_1, p_2, url_1, url_2).then()
    console.log('addBlog submit!', formInline.value)
    formInline.value = {
      title: '',
      phone: '',
      article: '',
      publishedAt: timenow,
      uptime: timenow,
    }
  } else {
    let timenow = new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false, // 使用 24 小时制
    })
    let uptime = timenow
    await updateBlog(filterNew._id, title, publishedAt, uptime, p_1, p_2, url_1, url_2).then()
    console.log('updateBlog submit!', formInline.value, uptime)
  }
  emit('handleDraewr')
}
</script>


<style lang="less" scoped>
.addNew {
  box-shadow: 0 0 0 0 #000;
  border-radius: 20rem;
  background-color: #fff;
  padding: 0;

  input {
    height: 60rem;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220rem;
}

.demo-form-inline .el-select {
  --el-select-width: 220rem;
}
</style>